<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<link href="../css/mui.min.css" rel="stylesheet" />
		<link rel="stylesheet" type="text/css" href="../css/mui.picker.min.css"/>
		<link rel="stylesheet" type="text/css" href="../css/mui.poppicker.css"/>
		<link rel="stylesheet" type="text/css" href="../css/lcs-pop2.css"/>
		<link rel="stylesheet" href="../css/together.css" />
		<link rel="stylesheet" type="text/css" href="../css/indexcss.css" />
		<link rel="stylesheet" type="text/css" href="../css/beiyong.css"/>
		<link rel="stylesheet" type="text/css" href="../css/iconfont.css"/>
		<title></title>
		<style type="text/css">
			
			.btdiv{
				width: 100%;
				border-bottom: 1px solid #FFFFFF;
			}
			.btdiv>input{
				width: 100%;
				padding: 11px 15px;
				background-color: #E7EFFE;
			}
			.contentdiv{
				padding: 11px 15px;
			}
			textarea{
				background-color: #E7EFFE;
			}
			footer{
				position: fixed;
				bottom: 0;
				width: 100%;
				display: flex;
				align-items: center;
				justify-content: center;
				background-color: white;
			}
			footer>div{
				flex: 1;
				height: 3em;
				display: flex;
				align-items: center;
				justify-content: center;
			}
			footer>div:first-child{
				border-right: 1px solid #E7EFFE;
			}
			footer>div:nth-child(2){
				border-right: 1px solid #E7EFFE;
			}
			
			
			video{
				width: 100%;
				height: auto;
			}
			.addimgdiv{
				width: 30%;
			}
			.addimgdiv>img{
				max-width:100%;
			}
			.noinput{
				position: absolute;
				top: -1800px;
			}
			.mui-table-view .mui-table-view-cell>a{
				width: 100%;
				text-align: center;
			}
			.vdiv{
				width: 100%;
				padding: 11px;
				display: flex;
				justify-content: flex-start;
				align-items: center;
				flex-flow: wrap;
			}
			.vdiv>.imagediv{
				position: relative;
				width: 33%;
				height: calc(vw*0.33);
				padding-left:calc((vw*0.3-11)/3);
				display: flex;
				justify-content: center;
				align-items: center;
			}
			.vdiv>.imagediv>img{
				width: 90%;
			}
			.vdiv>.videodiv{
				width: 100%;
				position: relative;
			}
			.vdiv>.audiodiv{
				width: 100%;
				position: relative;
			}
			.clocediv{
				position: absolute;
				top: -0.5em;
				border-radius: 50%;
				right: -0.5em;
				background-color: white;
				padding: 0.5em;
				z-index: 9;
			}
			
			.booklistdiv{
				position: absolute;
				top: 50px;
				left: 100%;
				width: 50%;
				background-color: white;
				height: auto;
				max-height: 80%;
				overflow-y: scroll;
				padding: 11px 15px;
				
			}
			
			.booklistdiv>div{
				text-align: center;
			}
			.mui-table-view{
				margin-top: .8em;
			} 
			.mui-table-view-cell {
			    position: relative;
			    overflow: hidden;
			    padding: 0.4em 1em;
			    -webkit-touch-callout: none;
			    color: #666666;
			    display: flex;
			    justify-content: flex-start;
			    align-items: center;
			    height: 3.5em;
			}
			.mui-table-view-cell.mui-checkbox input[type=checkbox], .mui-table-view-cell.mui-radio input[type=radio] {
			    top: 15px;
			}
		</style>
	</head>
	<body>
		<header class="mui-bar mui-bar-nav hbg">
		    <a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a>
		    <h1 class="mui-title">发布</h1>
		    <a class="mui-icon iconfont icon-shu mui-pull-right" id="booklist"></a>
		</header>
		<div class="mui-content">
			<div class="btdiv">
		    	<input type="" name="" id="circle_title" value="" placeholder="标题（选填）"/>
			</div>
		    <div class="contentdiv" id="contentid">
		    	<textarea id="textareaid" name="" rows="" cols="" placeholder="点击输入内容"></textarea>
		    </div>
		    <div class="vdiv" id="addfile">
		    	
		    	
		    	<!--
                	作者：592176224@qq.com
                	时间：2019-03-27
                	描述：
                
		    	<video width="" height="" controls="controls" preload="auto">
		    		<source src="../vidoe/dmp.mp4" type="video/mp4"></source>
		    		当前浏览器不支持 video直接播放，点击这里下载视频： <a href="../vidoe/dmp.mp4">下载视频</a>
		    	</video>
		    	<audio src="../audio/JNYW.mp3" controls="controls" loop="loop" preload="auto">
		    		当前浏览器不支持 audio直接播放，点击这里下载视频： <a href="../audio/JNYW.mp3">下载视频</a>
		    	</audio>
		    	<div class="addimgdiv" id="addimgdiv">
		    		<img src="../images/iconfont-tianjia.png"/>
		    	</div>
		    	-->
		    	<!--
                	作者：592176224@qq.com
                	时间：2019-03-28
                	描述：
                	onchange="getFilePath(this)"  
                <div class="addimgdiv" id="addimgdiv">
		    		<img src="../images/iconfont-tianjia.png"/>
		    	</div>
		    	<input type="file" class="" id="file" accept="*.mp4,*.ogg" />
		    <input type="submit" onclick="upsub()" value="上传"/>
                -->
		   		
		   		
		    </div>
		    <div class="fgd"></div>
		    <div class="booklistdiv" id="blistid">
		    </div>
		    <input type="file" class="noinput" id="file" accept="" />
		    <footer>
		    	<!--
		    	<div class="">
		    		背景
		    	</div>
		    	
                	作者：592176224@qq.com
                	时间：2019-03-27
                	描述：
                -->
                <div class="" id="insert">
		    		插入
		    	</div>
		    	<div class="" id="release">
		    		发布
		    	</div>
		    </footer>
		    
		    
		</div>
		
		 
		<script src="../js/jquery.min.js" type="text/javascript" charset="utf-8"></script>
		<script src="../js/mui.js" type="text/javascript" charset="utf-8"></script>
		<script src="../js/mui.picker.min.js" type="text/javascript" charset="utf-8"></script>
		<script src="../js/mui.poppicker.js" type="text/javascript" charset="utf-8"></script>
		<script src="../js/req.js" type="text/javascript" charset="utf-8"></script>
		<script src="../js/muishow.js" type="text/javascript" charset="utf-8"></script>
		<script type="text/javascript">
			var mid = 0,		//
			sub_type = 0;			//上传类型
			fileslist = [];
			var apiurl = '',		//上传路径
			fid = 0,				//上传后的文件id
			book_id = 0,			//书本id
			page = 1;				//页码
			var width = document.body.clientWidth;
			window.onload = function(){
				mui.init();
				sub_type = getrequest().sub_type;
				console.log(sub_type);
				setsub_type(parseInt(sub_type));
				
				//监听textarea 自适应高度
				g("textareaid").addEventListener("input", function(event) {
					this.style.height = this.scrollHeight + "px";
				});
				
				//监听选择书本
				g("booklist").addEventListener("tap",function(e){
					var left = parseInt($('#blistid').css('left'));
					if(left < width){
						$("#blistid").animate({left:'100%'});
					}else{
						$("#blistid").animate({left:'49%'});
					}
					
				})
				
				
				//监听添加文件
				$("#file").on("change",function(e){
					console.log(e)
					function getObjectURL(file) {
			            var url = null;
			            if (window.createObjcectURL != undefined) {
			                url = window.createOjcectURL(file);
			            } else if (window.URL != undefined) {
			                url = window.URL.createObjectURL(file);
			            } else if (window.webkitURL != undefined) {
			                url = window.webkitURL.createObjectURL(file);
			            }
			            return url;
			        }
					fileslist.push(this.files[0])
					var objURL = getObjectURL(this.files[0]);
					var str = ''
					if(sub_type == 1){
						str = rimage(objURL);
					}else if(sub_type == 2){
						str = rvideo(objURL);
					}else if(sub_type == 3){
						str = raudio(objURL);
					}
					console.log(str);
					$("#addfile").append(str);
					
				})
				//监听 删除文件按钮
				$("body").on("tap",".clocediv",function(e){
					var index = parseInt($(this).attr("index"));
					console.log(index);
					$(this).parent().remove();
					fileslist.splice(index,1);
					
				})
				//监听选择完书本
				$("#blistid").on("change","input:radio[name='radio']",function(e){
					book_id = parseInt($(this).attr("bid"));
					console.log(book_id);
					$("#blistid").animate({left:'100%'});
				})
				
				//监听发布
				g("release").addEventListener("tap",function(e){
					console.log(fileslist);
					if(book_id == 0){
						mui.toast("请选择书本");
						return;
					}
					if(fileslist&&fileslist.length > 0){
						request(fileslist[0]).then(res=>{
							mui.hideLoading();
							var data = {
								url:"/api/Circle/circleSubmit",
								data:{
									access_token:acctoken(),
									book_id:book_id,
									circle_title:g("circle_title").value||"",
									circle_content:g("textareaid").value||"",
									sub_type:sub_type,
									mid:res.data[0].mid||""
								}
							}
							ajax(data,function(resp){
								console.log(resp);
								mui.toast(resp.message);
								setTimeout(function(){
									mui.back();
								},300)
							})
						})
					}else{
						var data = {
								url:"/api/Circle/circleSubmit",
								data:{
									access_token:acctoken(),
									book_id:book_id,
									circle_title:g("circle_title").value||"",
									circle_content:g("textareaid").value||"",
									sub_type:sub_type,
									mid:0
								}
							}
							ajax(data,function(resp){
								console.log(resp);
								mui.toast(resp.message);
								setTimeout(function(){
									mui.back();
								},300)
							})
					}
					
					
					
				})
				
				//监听插入
				g("insert").addEventListener('tap', function(event) {
	                
	                $("#file").trigger("click");
	                
	            }, false);	
	            
	            getbooklist();
	            
			}
			
			function getbooklist(){
				var data = {
					url:"/api/Book/book_list",
					data:{
						access_token:acctoken(),
						page:page,
						is_all:1,
					}
				}
				
				ajax(data,function(res){
					console.log("书本列表",res);
					setbooklist(res.data);
				})
				
				
			}
			
			
			function setbooklist(list){
				var str = '<div class="">添加到书籍</div>';
				if(list&&list.length > 0){
					str += '<ul class="mui-table-view" >';
					list.forEach(function(item,index){
						str += '<li class="mui-table-view-cell mui-radio mui-left">'+
						'<input name="radio" bid="'+item.id+'" type="radio">'+
						item.title+'</li>';
					})
					str +='</ul>';
				}
				g("blistid").innerHTML = str
				
			}
			
			
			//设置input 类型
			function setsub_type(val){
				console.log(val)
				switch (val){
					case 1:
						setimage();
						break;
					case 2:
						setvideo();
						break;
					case 3:
						setaudio();
						break;	
					default:
						$("#insert").addClass("hidden");
						break;
				}
			}
			
			
			//设置视频类型返回视频字符串
			function setvideo(){
				console.log("设置视频")
				g("file").accept = 'video/mp4,application/ogg';
				apiurl = '/api/Video/upload';
			}
			function rvideo(url){
		    	return '<div class="videodiv">'+
		    		'<div index="'+(fileslist.length-1)+'" class="clocediv mui-icon iconfont icon-guanbi"></div>'+
		    		'<video controls="controls" preload="auto">'+
		    		'<source src="'+url+'" type="video/mp4"></source>'+
		    		'</video></div>';
			}
			
			//设置音频类型返回音频字符串
			function setaudio(){
				console.log("设置音频")
				g("file").accept = 'audio/ogg,audio/mpeg';
				apiurl = '/api/Music/upload';
			}
			function raudio(url){
				return '<div class="audiodiv">'+
				'<div index="'+(fileslist.length-1)+'" class="clocediv mui-icon iconfont icon-guanbi"></div>'+
				'<audio src="'+url+'" controls="controls" loop="loop" preload="auto"></audio></div>';
			}
			
			//设置图片类型 返回图片字符串
			function setimage(){
				console.log("设置图片");
	    		g("file").accept = 'image/png,image/jpeg,image/gif,image.jpg';
	    		apiurl = '/api/Image/upload';
			}
			function rimage(url){
				return '<div class="imagediv">'+
				'<div index="'+(fileslist.length-1)+'" class="clocediv mui-icon iconfont icon-guanbi"></div>'+
				'<img src="'+url+'"/></div>';
			}
			
			function upsub(){
				var fi = $("#file").get(0).files[0];
				request(fi);
			}
           
			
			function request(Blob){
				return new Promise((resp,relo)=>{
					var formData = new FormData();/*创建formData对象*/
					formData.append("access_token", acctoken());
					switch (parseInt(sub_type)){
					case 1:
						formData.append("image", Blob);
						break;
					case 2:
						formData.append("video", Blob);
						break;
					case 3:
						formData.append("music", Blob);
						break;	
					default:
						$("#insert").addClass("hidden");
						break;
				}
					mui.showLoading("正在上传");
				   $.ajax({
			            url: hurl + apiurl,
			            type:"POST",
			            processData: false,
			            contentType: false,
			            data: formData,
						cache:false,
			            success: function (res){
							console.log(res);
							if(res.code == 1){
								mui.toast("上传成功！")
								resp(res);
							}
							
			     		},
						error:function(err){
							console.log(err);
							relo(err);
						}
					})
					
				})
				
				
			}
			
		</script>
	</body>
</html>
